<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="Search in ant.design" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/"><span>Home</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/spec/introduce"><span>Guidelines</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/react/introduce"><span>Components</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Ant Design$Menu" aria-haspopup="true"><h4>Ant Design</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Ant Design$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/introduce"><span>Introduction</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/values"><span>Design Values</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/cases"><span>Cases</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true"><h4>Principles</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Principles$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/proximity"><span>Proximity</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/alignment"><span>Alignment</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/contrast"><span>Contrast</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/repetition"><span>Repetition</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/direct"><span>Make it Direct</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/stay"><span>Stay on the Page</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/lightweight"><span>Keep it Lightweight</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/invitation"><span>Provide an Invitation</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/transition"><span>Use Transition</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reaction"><span>React Immediately</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Visual$Menu" aria-haspopup="true"><h4>Visual</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Visual$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/docs/spec/colors"><span>Colors</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/layout"><span>Layout</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/font"><span>Font</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/icon"><span>Icons</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Patterns$Menu" aria-haspopup="true"><h4>Patterns</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Patterns$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/overview"><span>Overview</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/copywriting"><span>Copywriting</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/navigation"><span>Navigation</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-entry"><span>Data Entry</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-display"><span>Data Display</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/feedback"><span>Feedback</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/visual">Visualization</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/motion">Motion</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Other$Menu" aria-haspopup="true"><h4>Other</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Other$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/download"><span>Resources</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reference"><span>Reference</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/work-with-us"><span>Work with Us</span><span class="chinese"></span></a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article class="markdown"><h1>Colors<a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/colors.en-US.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.</p><p>The system-level color system mainly defines the basic color palette, neutral color palette and data visualization color palette in the design of Ant Financial. The product-level color system is in the specific design process, based on the color of the system to further define the tone of the product in accordance with the requirements and function of the color.</p></section><div class="toc-affix"><div class=""><ul class="toc"><li><a class="bisheng-toc-h2" href="#Color-Model" title="Color Model">Color Model</a></li><li><a class="bisheng-toc-h2" href="#System-level-Color-System" title="System-level Color System">System-level Color System</a></li><li><a class="bisheng-toc-h2" href="#Product-level-Color-System" title="Product-level Color System">Product-level Color System</a></li><li><a class="bisheng-toc-h2" href="#Color-Application-In-Enterprise-Product-Design" title="Color Application In Enterprise Product Design">Color Application In Enterprise Product Design</a></li></ul></div></div><section class="markdown"><h2 id="Color-Model"><span>Color Model</span><a href="#Color-Model" class="anchor">#</a></h2><p>Ant Design&#x27;s design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.</p><h2 id="System-level-Color-System"><span>System-level Color System</span><a href="#System-level-Color-System" class="anchor">#</a></h2><p>Ant Design system-level color system also comes from the &quot;natural&quot; design language. Designers abstract the natural scenes through the capture, combined with the technical gene of Ant Financial, forming a unique 12 colors. Further through a large number of observations, to capture the different colors of natural light under the law of change, with the art of drawing ideas, the 12 colors were derived. The definition of neutral color palette is balanced with readability, aesthetics and usability.</p><h3 id="Base-Color-Palettes"><span>Base Color Palettes</span><a href="#Base-Color-Palettes" class="anchor">#</a></h3><p>Ant Design&#x27;s base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.</p><div class="color-palettes"><div class="color-palette"><div class="color-title">Dust Red / 薄暮<span class="color-description">斗志、奔放</span></div><div class="main-color"><div class="main-color-item palatte-red-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-1</span></div><div class="main-color-item palatte-red-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-2</span></div><div class="main-color-item palatte-red-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-3</span></div><div class="main-color-item palatte-red-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-4</span></div><div class="main-color-item palatte-red-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">red-5</span></div><div class="main-color-item palatte-red-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">red-6</span></div><div class="main-color-item palatte-red-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-7</span></div><div class="main-color-item palatte-red-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-8</span></div><div class="main-color-item palatte-red-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-9</span></div><div class="main-color-item palatte-red-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">red-10</span></div></div></div><div class="color-palette"><div class="color-title">Volcano / 火山<span class="color-description">醒目、澎湃</span></div><div class="main-color"><div class="main-color-item palatte-volcano-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-1</span></div><div class="main-color-item palatte-volcano-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-2</span></div><div class="main-color-item palatte-volcano-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-3</span></div><div class="main-color-item palatte-volcano-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-4</span></div><div class="main-color-item palatte-volcano-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-5</span></div><div class="main-color-item palatte-volcano-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">volcano-6</span></div><div class="main-color-item palatte-volcano-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-7</span></div><div class="main-color-item palatte-volcano-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-8</span></div><div class="main-color-item palatte-volcano-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-9</span></div><div class="main-color-item palatte-volcano-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">volcano-10</span></div></div></div><div class="color-palette"><div class="color-title">Sunset Orange / 日暮<span class="color-description">温暖、欢快</span></div><div class="main-color"><div class="main-color-item palatte-orange-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-1</span></div><div class="main-color-item palatte-orange-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-2</span></div><div class="main-color-item palatte-orange-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-3</span></div><div class="main-color-item palatte-orange-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-4</span></div><div class="main-color-item palatte-orange-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-5</span></div><div class="main-color-item palatte-orange-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">orange-6</span></div><div class="main-color-item palatte-orange-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-7</span></div><div class="main-color-item palatte-orange-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-8</span></div><div class="main-color-item palatte-orange-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-9</span></div><div class="main-color-item palatte-orange-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">orange-10</span></div></div></div><div class="color-palette"><div class="color-title">Calendula Gold / 金盏花<span class="color-description">活力、积极</span></div><div class="main-color"><div class="main-color-item palatte-gold-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-1</span></div><div class="main-color-item palatte-gold-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-2</span></div><div class="main-color-item palatte-gold-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-3</span></div><div class="main-color-item palatte-gold-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-4</span></div><div class="main-color-item palatte-gold-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-5</span></div><div class="main-color-item palatte-gold-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">gold-6</span></div><div class="main-color-item palatte-gold-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-7</span></div><div class="main-color-item palatte-gold-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-8</span></div><div class="main-color-item palatte-gold-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-9</span></div><div class="main-color-item palatte-gold-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">gold-10</span></div></div></div><div class="color-palette"><div class="color-title">Sunrise Yellow / 日出<span class="color-description">出生、阳光</span></div><div class="main-color"><div class="main-color-item palatte-yellow-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-1</span></div><div class="main-color-item palatte-yellow-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-2</span></div><div class="main-color-item palatte-yellow-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-3</span></div><div class="main-color-item palatte-yellow-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-4</span></div><div class="main-color-item palatte-yellow-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-5</span></div><div class="main-color-item palatte-yellow-6" style="color:unset;font-weight:bold" title="click to copy color"><span class="main-color-text">yellow-6</span></div><div class="main-color-item palatte-yellow-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-7</span></div><div class="main-color-item palatte-yellow-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-8</span></div><div class="main-color-item palatte-yellow-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-9</span></div><div class="main-color-item palatte-yellow-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">yellow-10</span></div></div></div><div class="color-palette"><div class="color-title">Lime / 青柠<span class="color-description">自然、生机</span></div><div class="main-color"><div class="main-color-item palatte-lime-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-1</span></div><div class="main-color-item palatte-lime-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-2</span></div><div class="main-color-item palatte-lime-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-3</span></div><div class="main-color-item palatte-lime-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-4</span></div><div class="main-color-item palatte-lime-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-5</span></div><div class="main-color-item palatte-lime-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">lime-6</span></div><div class="main-color-item palatte-lime-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-7</span></div><div class="main-color-item palatte-lime-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-8</span></div><div class="main-color-item palatte-lime-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-9</span></div><div class="main-color-item palatte-lime-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">lime-10</span></div></div></div><div class="color-palette"><div class="color-title">Polar Green / 极光绿<span class="color-description">健康、创新</span></div><div class="main-color"><div class="main-color-item palatte-green-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-1</span></div><div class="main-color-item palatte-green-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-2</span></div><div class="main-color-item palatte-green-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-3</span></div><div class="main-color-item palatte-green-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-4</span></div><div class="main-color-item palatte-green-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">green-5</span></div><div class="main-color-item palatte-green-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">green-6</span></div><div class="main-color-item palatte-green-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-7</span></div><div class="main-color-item palatte-green-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-8</span></div><div class="main-color-item palatte-green-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-9</span></div><div class="main-color-item palatte-green-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">green-10</span></div></div></div><div class="color-palette"><div class="color-title">Cyan / 明青<span class="color-description">希望、坚强</span></div><div class="main-color"><div class="main-color-item palatte-cyan-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-1</span></div><div class="main-color-item palatte-cyan-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-2</span></div><div class="main-color-item palatte-cyan-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-3</span></div><div class="main-color-item palatte-cyan-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-4</span></div><div class="main-color-item palatte-cyan-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-5</span></div><div class="main-color-item palatte-cyan-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">cyan-6</span></div><div class="main-color-item palatte-cyan-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-7</span></div><div class="main-color-item palatte-cyan-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-8</span></div><div class="main-color-item palatte-cyan-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-9</span></div><div class="main-color-item palatte-cyan-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">cyan-10</span></div></div></div><div class="color-palette"><div class="color-title">Daybreak Blue / 拂晓蓝<span class="color-description">包容、科技、普惠</span></div><div class="main-color"><div class="main-color-item palatte-blue-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-1</span></div><div class="main-color-item palatte-blue-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-2</span></div><div class="main-color-item palatte-blue-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-3</span></div><div class="main-color-item palatte-blue-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-4</span></div><div class="main-color-item palatte-blue-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-5</span></div><div class="main-color-item palatte-blue-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">blue-6</span></div><div class="main-color-item palatte-blue-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-7</span></div><div class="main-color-item palatte-blue-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-8</span></div><div class="main-color-item palatte-blue-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-9</span></div><div class="main-color-item palatte-blue-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">blue-10</span></div></div></div><div class="color-palette"><div class="color-title">Geek Blue / 极客蓝<span class="color-description">探索、钻研</span></div><div class="main-color"><div class="main-color-item palatte-geekblue-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-1</span></div><div class="main-color-item palatte-geekblue-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-2</span></div><div class="main-color-item palatte-geekblue-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-3</span></div><div class="main-color-item palatte-geekblue-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-4</span></div><div class="main-color-item palatte-geekblue-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-5</span></div><div class="main-color-item palatte-geekblue-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">geekblue-6</span></div><div class="main-color-item palatte-geekblue-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-7</span></div><div class="main-color-item palatte-geekblue-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-8</span></div><div class="main-color-item palatte-geekblue-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-9</span></div><div class="main-color-item palatte-geekblue-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">geekblue-10</span></div></div></div><div class="color-palette"><div class="color-title">Golden Purple / 酱紫<span class="color-description">优雅、浪漫</span></div><div class="main-color"><div class="main-color-item palatte-purple-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-1</span></div><div class="main-color-item palatte-purple-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-2</span></div><div class="main-color-item palatte-purple-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-3</span></div><div class="main-color-item palatte-purple-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-4</span></div><div class="main-color-item palatte-purple-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-5</span></div><div class="main-color-item palatte-purple-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">purple-6</span></div><div class="main-color-item palatte-purple-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-7</span></div><div class="main-color-item palatte-purple-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-8</span></div><div class="main-color-item palatte-purple-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-9</span></div><div class="main-color-item palatte-purple-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">purple-10</span></div></div></div><div class="color-palette"><div class="color-title">Magenta / 法式洋红<span class="color-description">明快、感性</span></div><div class="main-color"><div class="main-color-item palatte-magenta-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-1</span></div><div class="main-color-item palatte-magenta-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-2</span></div><div class="main-color-item palatte-magenta-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-3</span></div><div class="main-color-item palatte-magenta-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-4</span></div><div class="main-color-item palatte-magenta-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-5</span></div><div class="main-color-item palatte-magenta-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">magenta-6</span></div><div class="main-color-item palatte-magenta-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-7</span></div><div class="main-color-item palatte-magenta-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-8</span></div><div class="main-color-item palatte-magenta-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-9</span></div><div class="main-color-item palatte-magenta-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">magenta-10</span></div></div></div></div><p>Ant Design&#x27;s color palette also has the ability to further extend. After careful elaboration by designers and programmers, we have come up with a set of color generation tools that combine the natural variation of colors. When there is a need for further color design, designers simply define the primary colors according to certain rules and will get a complete range of derived colors automatically .</p><h3 id="Neutral-Color-Palette"><span>Neutral Color Palette</span><a href="#Neutral-Color-Palette" class="anchor">#</a></h3><div class="color-palette-horizontal"><div class="main-color"><div class="main-color-item palatte-grey-1" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-1</span></div><div class="main-color-item palatte-grey-2" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-2</span></div><div class="main-color-item palatte-grey-3" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-3</span></div><div class="main-color-item palatte-grey-4" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-4</span></div><div class="main-color-item palatte-grey-5" style="color:unset;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-5</span></div><div class="main-color-item palatte-grey-6" style="color:#fff;font-weight:bold" title="click to copy color"><span class="main-color-text">grey-6</span></div><div class="main-color-item palatte-grey-7" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-7</span></div><div class="main-color-item palatte-grey-8" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-8</span></div><div class="main-color-item palatte-grey-9" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-9</span></div><div class="main-color-item palatte-grey-10" style="color:#fff;font-weight:normal" title="click to copy color"><span class="main-color-text">grey-10</span></div></div></div><h3 id="Data-Visualization-Color-Palette-(Coming-soon)"><span>Data Visualization  Color Palette (Coming soon)</span><a href="#Data-Visualization-Color-Palette-(Coming-soon)" class="anchor">#</a></h3><p>Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV&#x27;s &quot;effective, clear, accurate and beautiful&quot;.</p><h3 id="Palette-Generation-Tool"><span>Palette Generation Tool</span><a href="#Palette-Generation-Tool" class="anchor">#</a></h3><p>If the above palettes do not meet your needs, you can choose a main color below, and Ant Design&#x27;s color generation algorithm will generate a palette for you.</p><div class="color-palette-horizontal"><div class="color-palette-pick"><span>Pick your primary color</span></div><div class="main-color"><div class="main-color-item" style="background:#e6f7ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->1<span class="main-color-value">#e6f7ff</span></div><div class="main-color-item" style="background:#bae7ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->2<span class="main-color-value">#bae7ff</span></div><div class="main-color-item" style="background:#91d5ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->3<span class="main-color-value">#91d5ff</span></div><div class="main-color-item" style="background:#69c0ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->4<span class="main-color-value">#69c0ff</span></div><div class="main-color-item" style="background:#40a9ff;color:unset;font-weight:normal" title="click to copy color">color-<!-- -->5<span class="main-color-value">#40a9ff</span></div><div class="main-color-item" style="background:#1890ff;color:#fff;font-weight:bold" title="click to copy color">color-<!-- -->6<span class="main-color-value">#1890ff</span></div><div class="main-color-item" style="background:#096dd9;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->7<span class="main-color-value">#096dd9</span></div><div class="main-color-item" style="background:#0050b3;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->8<span class="main-color-value">#0050b3</span></div><div class="main-color-item" style="background:#003a8c;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->9<span class="main-color-value">#003a8c</span></div><div class="main-color-item" style="background:#002766;color:#fff;font-weight:normal" title="click to copy color">color-<!-- -->10<span class="main-color-value">#002766</span></div></div><div class="color-palette-picker"><span style="display:inline-block;vertical-align:middle"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:120px;height:24px;border-radius:2px;background:#1890ff"></div></div></div></span><span class="color-palette-picker-value">#1890ff</span><span class="color-palette-picker-validation"></span></div></div><hr/><h2 id="Product-level-Color-System"><span>Product-level Color System</span><a href="#Product-level-Color-System" class="anchor">#</a></h2><h3 id="Brand-Color"><span>Brand Color</span><a href="#Brand-Color" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/diEtYItrQZpqsiPsadeU.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design&#x27;s brand color comes from blue of the base color palette, it&#x27;s Hex value is 1890FF, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes.</p><h3 id="Functional-Color"><span>Functional Color</span><a href="#Functional-Color" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/rfkSGJhMIhnUYILGIlrh.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>Functional color represents a clear message as well as status, such as success, error, failure, reminder, link and so on. Functional color selection need to comply with the user&#x27;s basic understanding of color. We suggest that the functional colors should be kept as consistent as possible under a set of product systems. Do not have too much customization to interfere with the user&#x27;s cognitive experience. Ant Design&#x27;s functional color palette is shown on the right:</p><h3 id="Neutral-Color"><span>Neutral Color</span><a href="#Neutral-Color" class="anchor">#</a></h3><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/mkaVzBvUUEcTKeUxhgpN.png"/></div><div class="preview-image-title"></div><div class="preview-image-description"></div></div></div><p>Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutral color definition needs to consider the difference between dark background and light background, while incorporating the WCAG 2.0 standard. The neutral color of Ant Design is based on transparency, as shown on the right:</p><hr/><h2 id="Color-Application-In-Enterprise-Product-Design"><span>Color Application In Enterprise Product Design</span><a href="#Color-Application-In-Enterprise-Product-Design" class="anchor">#</a></h2><p>In the design of background applications of Ant Financial, our attitude towards color is restrained. Color is used more based on information delivery, operational guidance and interactive feedback purposes. Above these principles that do not undermine operational efficiency and affect the clear communication of information, a rational choice of color is key. Of course, with illustrations and display page can be properly broken this idea.</p></section><section class="markdown api-container"></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/docs/spec/reaction"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>React Immediately</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/docs/spec/layout"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Layout</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Resources</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch Toolkit</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>Scaffold Market</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React Application Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>Data Flow Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>Motion Solution</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure library</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>Sitemap Template</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>China Mirror 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Community</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>Zhihu</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>Experience Cloud Blog</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>Seeking Experience &amp; Engineering Conference</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>Work with Us</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Help</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>Change Log</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design Practical Tutorial</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>FAQ</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>Chat Room (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>Chat Room (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>Bug Report</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>Issues</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>More Products</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>YuQue</span></a><span> - </span><span>Write your document as a team</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>FengDie</span></a><span> - </span><span>Mobile web app builder</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>Data Visualization</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>Enterprise Node Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>Ant Experience Cloud</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
